<template>
  <h3>选项式API(配置):props</h3>
  <div>
    <h3 @click="editTitle">{{ tle }}</h3>
    <p>props.title ： {{ title }}</p>
    <p>props.des ： {{ des }}</p>
    <p>props.dao ： {{ dao.name }}</p>
    <p>props.user ： {{ user.sex }}</p>
    <p>props.des2 ： {{ des2 }}</p>
  </div>
  <div v-show="isShow" class="isShowHide">显示或隐藏</div>
</template>

<script lang="ts">
//props默认配置
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    des: {
      type: [Number, String],
      default: 'des的默认值', //加入父组件不传此属性，以此为默认值
    },
    //默认值，如果父组件没有传这个，子组件就是用这个自己预设的默认值
    dao: {
      type: Object,
      default() {
        return {
          name: '青龙偃月刀',
        };
      },
    },
    //默认值，如果父组件没有传这个，子组件就是用这个自己预设的默认值
    user: {
      type: Object,
      //rawProps 是 Vue 在处理 props 的默认值时自动传递给默认值函数的参数。它并不是 Vue API 的一部分，而是特定情况下（如 default 函数中）由 Vue 自动传递的一个对象, rawProps 是 Vue 在调用 props 的 default 函数时传递的参数，它包含了父组件传递给子组件的所有 props 的值
      default(rawProps: any) {
        console.log(rawProps);
        return {
          name: '小度小度' + rawProps.title,
          sex: 1,
        };
      },
    },
    des2: {
      type: [String, Number],
      default: 'des2的默认值',
    },
    //函数类型的默认值
    propH: {
      type: Function,
      default() {
        console.log('子组件props函数被调用');
        return 'Default function';
      },
    },
  },
  data() {
    // 在data函数中return回去的对象里边的属性都是响应式变量
    return {
      tle: this.title,
      sonTitle: '我是子组件定义的标题 sonTitle',
      isShow: false,
    };
  },
  methods: {
    editTitle() {
      this.tle = '可以修改被props的值初始化后的状态变量';
      this.propH(this.sonTitle, this.showHander);
    },
    showHander() {
      this.isShow = !this.isShow;
    },
  },
  computed: {},
  monted() {},
  wathc: () => {},
};
</script>
<style lang="scss">
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
</style>
